---
import type { MarkdownHeading } from "astro";
import type { CollectionEntry } from "astro:content";

import CommonLayout from "./CommonLayout.astro";

import PageContent from "@components/PageContent/PageContent.astro";
import Contributors from "@components/PageContent/Contributors.astro";
import LeftSidebar from "@components/LeftSidebar/LeftSidebar.astro";
import RightSidebar from "@components/RightSidebar/RightSidebar.astro";
import PageNavigation from "@components/Pagination/PageNavigation.astro";

export type Props = CollectionEntry<"docs">["data"] & {
  headings: MarkdownHeading[];
  translations: { lang: string; slug: string }[];
  breadcrumbs: { title: string; path: string }[];
  lang: string;
  documentId: string;
  redirectTo?: string;
  pagefindWeight?: number;
  indexing?: boolean;
};

const {
  headings,
  translations,
  breadcrumbs,
  lang,
  documentId,
  pagefindWeight,
  indexing = false,
  ...data
} = Astro.props;
const currentPage = Astro.url.pathname;
---

<CommonLayout lang={lang} {...data}>
  <main class="layout">
    <aside id="grid-left" title="Site Navigation" data-pagefind-ignore="all">
      <LeftSidebar currentPage={currentPage} headings={headings} />
    </aside>
    <div id="grid-main">
      <PageContent
        title={data.title}
        headings={headings}
        documentId={documentId}
        translations={translations}
        breadcrumbs={breadcrumbs}
        pagefindWeight={pagefindWeight}
        indexing={indexing}
      >
        <slot />
        <PageNavigation />
      </PageContent>
      <Contributors documentId={documentId} />
    </div>
    <aside id="grid-right" title="Table of Contents" data-pagefind-ignore="all">
      <RightSidebar lang={lang} headings={headings} documentId={documentId} />
    </aside>
  </main>
</CommonLayout>

<style>
  :root {
    --gutter: 0.5rem;
    --content-max-width: 56rem;
  }

  main {
    margin-top: var(--theme-navbar-height);
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--content-max-width)) minmax(
        var(--gutter),
        1fr
      );
    grid-auto-flow: column;
    overflow-x: hidden;
  }

  #grid-left {
    display: none;
    position: fixed;
    z-index: 10;
    background-color: var(--theme-bg);
    height: 100%;

    position: sticky;
    top: var(--theme-navbar-height, 0);
    padding: 0;
    height: calc(100vh - var(--theme-navbar-height, 0));
  }

  #grid-main {
    display: flex;
    grid-column: 2;
    flex-direction: column;
    padding-block: var(--doc-padding);
    padding-inline: 0.2rem;
    height: 100%;
  }

  #grid-right {
    display: none;
  }

  @media (min-width: 768px) {
    :root {
      --sidebar-left-width: 20rem;
    }

    .layout {
      grid-template-columns: var(--sidebar-left-width) minmax(0, var(--content-max-width));
      gap: 1em;
      overflow: initial;
    }

    #grid-left {
      display: flex;
      position: sticky;
      grid-column: 1;
      padding-left: 2rem;
    }

    #grid-main {
      padding-right: 2rem;
    }
  }

  @media (min-width: 1280px) {
    :root {
      --sidebar-right-width: 18rem;
      --header-max-width: calc(
        var(--sidebar-left-width) + var(--content-max-width) + var(--sidebar-right-width)
      );
    }

    .layout {
      grid-template-columns: var(--sidebar-left-width) minmax(0, var(--content-max-width)) var(
          --sidebar-right-width
        );
      margin-right: auto;
      margin-left: auto;
      padding-right: 0;
      padding-left: 0;
    }

    #grid-right {
      display: flex;
      grid-column: 3;
    }
  }

  @media (min-width: 1536px) {
    :root {
      --sidebar-left-width: 22rem;
      --sidebar-right-width: 20rem;
    }
  }
</style>
<style is:global>
  .layout > * {
    width: 100%;
    height: 100%;
  }
</style>
